<template>
  <div>
    <!-- 顶栏 -->
    <van-nav-bar title="用户注册" />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <!-- 跳转 -->
    <div class="text-right">
      <router-link to="/login">有账号，去登陆</router-link>
    </div>

  </div>
</template>

<script>
import { register } from '../api/user'
import { Notify } from "vant";
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async onSubmit() {
      // console.log('submit', values);
      const res = await register({
        username: this.username,
        password: this.password
      })
      if (res.status === 200) {
        // 提示用户，注册成功
        Notify({ type: "success", message: "注册成功" });
        // 跳转登录页面
        this.$router.push("/login");
      }

    }
  }
}
</script>

<style scoped>
.text-right {
  text-align: right;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 700;
}

.text-right a {
  color: #006397;
}
</style>